<template>
  <div class="color-picker">
    <span
      v-for="n in colors"
      :key="n"
      class="item"
      :style="getItemStyle(n)"
      :title="getItemTitle(n)"
      @click="selectColor(n)"
    ></span>
    <el-color-picker
      v-if="!loading"
      v-model="valueNew"
      :popper-class="'vis-color-picker-panel-' + xvueTheme"
      size="default"
      color-format="hex"
      :show-alpha="showAlpha"
      :placement="'bottom-end'"
    ></el-color-picker>
  </div>
</template>
<script>
import { nextTick } from 'vue';
export default {
  components: {},
  props: {
    value: String,
    colors: {

      // 预选色
      type: Array,
      default: () => ['#e6e6e6', '#666666', '#26B0FF', '#15BC83', '#C089D9', '#FF943E', '#FE4C56'],
    },
    showAlpha: {
      type: Boolean,
      default: true,
    },
    componentStyle: String,
    dfColor: {
      type: Object,
      default: () => ({
        light: '',
        dark: '',
        real: '',
      }),
    },
  },
  emits: ['update:value', 'change'],
  data() {
    return {
      valueNew: this.value,
      xvueTheme: window._adoPremise.uc.theme, // 'dark',
      loading: false,
    };
  },
  computed: {},
  watch: {
    value(val) {
      this.valueNew = val;

      // el-color-picker v-model绑定有bug，切换风格时颜色不会响应，需要销毁组件重新加载才有效
      this.loading = true;
      nextTick(() => {
        this.loading = false;
      });
    },
    valueNew(val) {
      const color = val ? val : '';
      this.$emit('update:value', color);
      this.$emit('change', color);
    },
    componentStyle(val) {
      if (this.dfColor[val]) {
        this.valueNew = this.dfColor[val];
      }
    },
  },
  methods: {
    getItemStyle(color) {
      const style = {
        backgroundColor: color,
      };
      if (!color) {
        style.border = '1px solid #ccc';
      }
      return style;
    },
    getItemTitle(n) {
      return n ? n.toUpperCase() : this.$demoi18n('transparent');
    },
    selectColor(color) {
      this.valueNew = color;
    },
  },
};
</script>
<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less" scoped>
.color-picker {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 22px;
    height: 22px;
    cursor: pointer;
    box-sizing: border-box;
  }
  :deep(.el-color-picker) {
    width: 22px;
    height: 22px;
    .el-color-picker__trigger {
      width: 22px;
      height: 22px;
      padding: 0;
      border: none;
      .el-color-picker__color {
        border-radius: unset;
      }
      .el-color-picker__icon {
        &:before{
          color: #fff;
        }
      }
    }
  }
}
</style>
